<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    showFooter
    :width="width"
    :title="getTitle"
    @ok="handleSubmit"
    :destroyOnClose="true"
  >
    <MyAceEditor
      ref="editor"
      mode="json"
      v-model:content="content"
      :style="aceEditorStyle"
    />
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed} from "vue";
import { BasicDrawer, useDrawerInner } from "/@/components/Drawer";
import * as tmplApi from "/@/api/infra/configTmpl";
import { useAdapt } from "/@/hooks/system/useAutoAdapt";
import { useMessage } from "/@/hooks/web/useMessage";
import MyAceEditor from "/@/components/My/MyAceEditor.vue";
const { createMessage } = useMessage();

const aceEditorStyle = ref<string>("width: 100%; height: calc(100vh - 150px)");

const emit = defineEmits(["success", "register"]);
const { width } = useAdapt();
const content = ref();
const parentId = ref();
const [register, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  console.log("data: ", data);
  content.value = undefined;
  setDrawerProps({ confirmLoading: false });
  parentId.value = data.parentId;
});

const getTitle = computed(() => "导入配置模板");
async function handleSubmit() {
  try {
    const values = JSON.parse(content.value);
    console.log("submit configTmpl: ", values);

    setDrawerProps({ confirmLoading: true });
    await tmplApi.importTmpl(values);
    createMessage.success(`${getTitle.value} 成功`);
    closeDrawer();
    emit("success");
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}
</script>
